<template>
  <div class="buy">
    <van-pull-refresh v-model="isLoading"
                      @refresh="onRefresh"
                      :disabled="disabled"
                      :head-height="headHeight">
      <component-scroll ref="scroll"
                        class="scroll"
                        @scrollend="handleScrollEnd"
                        :listenScroll="listenScroll"
                        @pullingUp="handlePullLoad"
                        :data="list">
        <div class="content">
          <buy-swiper :list="swiperList"
                      @loadImg="loadDataed"></buy-swiper>
          <buy-hot :list="list"></buy-hot>
          <div class="loading"
               v-show="load">{{loading}}</div>
          <div class="finish"
               v-show="finish">{{nomore}}</div>

        </div>
      </component-scroll>
    </van-pull-refresh>
    <component-tab></component-tab>
  </div>
</template>

<script>
import ComponentScroll from 'common/scroll'
import BuySwiper from './components/swiper'
import ComponentTab from 'common/tabBar'
import BuyHot from './components/hot'
import {
  Toast
} from 'vant'
export default {
  name: 'Buy',
  components: {
    ComponentTab,
    ComponentScroll,
    BuySwiper,
    BuyHot
  },
  data () {
    return {
      swiperList: [], // 轮播
      list: [], // 热门数据
      page: 1, // 页码
      total: 0, // 数据总数
      isLoading: false, // 是否刷新中
      disabled: false, // 是否下拉刷新
      scrollHeight: 0, // 滚动高度
      headHeight: 100, // 下拉刷新高度
      load: false, // 上拉加载
      loading: '加载中...', // 加载中
      nomore: '没有更多',
      finish: false // 加载完成
    }
  },
  methods: {
    onRefresh () {
      const msg = '刷新成功'
      this.page = 1
      this.list = []
      this.getSwiper()
      this.getHot()
      setTimeout(() => {
        Toast({
          message: msg,
          duration: 1000,
          forbidClick: true
        })
      }, 500)
    },
    // 获取轮播
    getSwiper () {
      this.$api.buy.getSwiper()
        .then(this.getSwiperSucc)
        .catch((e) => {
          console.log(e)
        })
    },
    getSwiperSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        const data = res.data
        this.swiperList = data.slide
        this.isLoading = false
      }
    },
    // 获取热门列表
    getHot () {
      const page = this.page
      this.$api.buy.getHot({ page })
        .then(this.getHotSucc)
    },
    getHotSucc (res) {
      const CODE_OK = this.$api.CODE_OK
      const LOGIN_CODE = this.$api.LOGIN_CODE
      res = res.data
      if (res.code === CODE_OK && res.data) {
        const data = res.data
        this.total = data.total
        this.list = this.list.concat(data.handbook)
        this.load = false
        this.isLoading = false
      } else if (res.code === LOGIN_CODE) {
        this.$reLogin()
      }
    },
    // 计算滚动
    loadDataed () {
      if (!this.checkLoaded) {
        this.$refs.scroll.refresh()
        this.checkLoaded = true
      }
    },
    // 滚动结束
    handleScrollEnd (pos) {
      this.scrollHeight = -pos.y
    },
    handlePullLoad () {
      const finish = this.finish
      if (!finish) {
        this.page++
        this.load = true
        setTimeout(() => {
          this.getHot()
        }, 200)
      }
      this.$refs.scroll.finishPullUp()
      this.$refs.scroll.refresh()
    }
  },
  watch: {
    scrollHeight (newY) {
      this.disabled = newY > 0
    },
    list () {
      const total = this.total
      const list = this.list.length
      this.finish = !(total > list)
    }
  },
  created () {
    this.getSwiper()
    this.getHot()
    this.listenScroll = true
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.buy >>> .van-pull-refresh__track
  width 100%
  height 100vh

.buy
  touch-action none
  position absolute
  top 0
  left 0
  bottom 0
  right 0
  overflow hidden

.scroll
  bottom 110px

  .loading, .finish
    width 100%
    line-height 42px
    font-size $common_fz
    color $location
    text-align center
</style>
